<template>
  <div class="wrapper">
    <div class="wrapper__toptoolbar">
      <Back />
      <Search :placeholder="test" />
    </div>
    <div class="wrapper__shop">
      <ShopInfo :item="item" :hideBorder="true" v-show="item.imgUrl" />
      <Content :shopName='item.name'/>
    </div>
      <Cart />
  </div>
</template>

<script>
import ShopInfo from "../../components/ShopInfo";
import Content from "./Content";
import Cart from "./Cart"
import Search from "../../components/Search";
import Back from "../../components/Back";
import { get } from "../../utils/request";
import { reactive, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";

//获取当前商铺信息
const useShopInfoEffect = () => {
  const route = useRoute();
  const data = reactive({
    item: {},
  });
  const getItemData = async () => {
    const result = await get(`/api/shop/${route.params.id}`);
    if (result?.errno === 0 && result?.data) {
      data.item = result.data;
    }
  };
  const { item } = toRefs(data);
  return { item, getItemData };
};

export default {
  name: "Shop",
  components: { ShopInfo, Content, Cart, Search, Back },
  setup() {
    const { item, getItemData } = useShopInfoEffect();
    getItemData();
    const test = "请输入商品名称搜索";
    return { item, test };
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 0 0.18rem;
  &__shop {
    padding: 0.16rem 0 0.24rem;
  }
  &__toptoolbar {
    display: flex;
    padding-top: 0.16rem;
  }
}
.shopLis__item {
  margin-bottom: 0;
  &__con {
    padding-bottom: 0;
  }
}
</style>